<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #fdfdfd;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(3, 120px);
            grid-template-rows: repeat(3, 120px);
            gap: 10px;
            justify-items: center;
            align-items: center;
        }

        span, #main {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            border: 2px solid pink;
            border-radius: 16px;
            box-shadow: 2px 2px 3px rgba(226, 86, 109, 0.459);
            font-size: 14px;
            text-align: center;
            transition: background-color 0.3s, transform 0.3s;
        }

        #main {
            background-color: rgba(243, 97, 126, 0.85);
            cursor: pointer;
            font-weight: bold;
        }

        #main:hover {
            background-color: rgba(243, 97, 126, 1);
            transform: scale(1.05);
        }

        .result {
            margin-top: 20px;
            font-size: 20px;
            font-weight: bold;
            color: #333;
            text-align: center;
        }

        /* 设置抽奖按钮位置 */
        #main {
            grid-column: 2;
            grid-row: 2;
        }
    </style>
</head>
<body>
    <div class="container">
        <span>可视化</span>
        <span>图形学</span>
        <span>操作系统</span>
        <span>乐事</span>
        <div id="main">抽奖</div>
        <span>大白兔</span>
        <span>黑咖啡</span>
        <span>芋泥奶茶</span>
        <span>柠檬水</span>
    </div>
    <div class="result" id="result"></div>

    <script>
        let main = document.getElementById("main");
        let boxes = document.getElementsByTagName("span");
        let resultDiv = document.getElementById("result");
        let prizeNames = ["可视化", "图形学", "操作系统", "乐事", "大白兔", "黑咖啡", "芋泥奶茶", "柠檬水"];
        
        // 每个奖品的权重，权重总和为 100
        let weights = [10, 15, 5, 20, 10, 15, 15, 10]; // 权重设置，决定中奖概率
        let totalWeight = weights.reduce((a, b) => a + b, 0); // 计算权重总和
        let num = null;

        // 根据权重生成中奖索引
        function getRandomPrizeIndex() {
            let random = Math.random() * totalWeight; // 随机生成一个 0 ~ totalWeight 之间的值
            let sum = 0;

            for (let i = 0; i < weights.length; i++) {
                sum += weights[i];
                if (random <= sum) {
                    return i; // 返回对应奖品的索引
                }
            }
            return 0; // 默认返回第一个
        }

        main.onclick = function () {
            resultDiv.textContent = ""; // 清空之前的结果
            let temp = setInterval(() => {
                if (num !== null) {
                    boxes[num].style.backgroundColor = "white";
                }
                num = parseInt(Math.random() * 8);
                boxes[num].style.backgroundColor = "rgba(243, 97, 126, 0.651)";
            }, 100);

            setTimeout(() => {
                clearInterval(temp);
                // 根据权重计算中奖索引
                let winningIndex = getRandomPrizeIndex();
                boxes[num].style.backgroundColor = "white"; // 清除最后的随机高亮
                boxes[winningIndex].style.backgroundColor = "rgba(240, 240, 240, 0.8)";
                resultDiv.textContent = "恭喜您，中奖：" + prizeNames[winningIndex];
            }, 3000);
        }
    </script>
</body>
</html>
